<template>
    <div>
        <el-row>
            <el-col :span="8" style="padding-right:10px">
                <el-card class="box-card">
                    <div class="user">
                        <img src="../assets/images/user.jpg" alt="">
                        <div class="userinfo">
                            <p class="name">米羊</p>
                            <p class="access">超级管理员</p>
                        </div>
                    </div>
                    <div class="login-info">
                        <p>上次登录时间：<span>2022-11-3 19:30</span></p>
                        <p>上次登录地点：<span>乐山</span></p>
                    </div>
                </el-card>
                <el-card class = "schoolAddress" style="margin-top:20px" >
                    <el-table
                    :data="tableData"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                        <el-table-column  width="140" v-for = '(val,key) in tableLabel' :prop = 'key' :label = 'val' ></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="16">
                <div class="num">
                    <el-card v-for="item in countData" :key="item.name" :body-style="{display:'flex',padding:0}">
                        <i class="icon" :class="`el-icon-${item.icon}`" :style="{background:item.color}"></i>
                        <div class="detail">
                            <p class="price">{{item.value}}</p>
                            <p class="desc">{{item.name}}</p>
                        </div>
                    </el-card>
                </div>
                <el-card style="height:280px">
                    <!-- 折线图 -->
                    <div ref="echarts1" style="height :280px">
                         
                    </div>
                </el-card>
                <div class="graph">
                    <el-card style="height:260px">
                        <div ref="echarts2" style="height:260px"></div>
                    </el-card>
                    <el-card style="height:260px">
                        <div ref="echarts3" style="height:230px"></div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import {getData} from '../api'
import * as echarts from 'echarts'
export default {
     methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data(){
        return{
            tableData:[],
            tableLabel:{
                date:'日期',
                name:'姓名',
                address:'地址'
            },
            countData: [
            {
            name: "今日投简历数",
            value: 18,
            icon: "success",
            color: "#2ec7c9",
            },
            {
            name: "今日面试数",
            value: 5,
            icon: "star-on",
            color: "#ffb980",
            },
            {
            name: "今日收到offer",
            value: 0,
            icon: "s-goods",
            color: "#5ab1ef",
            },
            {
            name: "本月投简历数",
            value: 212,
            icon: "success",
            color: "#2ec7c9",
            },
            {
            name: "本月面试数",
            value: 33,
            icon: "star-on",
            color: "#ffb980",
            },
            {
            name: "本月收到offer",
            value: 1,
            icon: "s-goods",
            color: "#5ab1ef",
            },
        ],
        }
    },
    mounted(){
        getData().then(({data})=>{
            const {tableData} = data.data
            this.tableData = tableData

            //基于准备好的dom，初始化echarts示例
            this.$refs.echarts1 
            const echarts1 = echarts.init(this.$refs.echarts1)
            //指定图表的配置项和数据
            var echarts1option = {}
            //处理数据xAxis 
            const {orderData,userData,videoData} = data.data
            const xAxis = Object.keys(orderData.data[0])
            const xAxisData = {
                data:xAxis
            }
            echarts1option.xAxis= xAxisData
            echarts1option.yAxis= {}
            echarts1option.legend = xAxisData
            echarts1option.series = []
            xAxis.forEach(key =>{
                 echarts1option.series.push({
                    name:key,
                    data:orderData.data.map(item => item[key]),
                    type:'line'
                 })
            })
            // 使用指定的配置项和数据显示图表
            echarts1.setOption(echarts1option)

            //柱状图 
            const echarts2 = echarts.init(this.$refs.echarts2)
            const echarts2Options = {
                legend: {
      // 图例文字颜色
                    textStyle: {
                        color: "#333",
                    },
                },
                grid: {
                    left: "20%",
                },
                    // 提示框
                tooltip: {
                    trigger: "axis",
                },
                 xAxis: {
                    type: "category", // 类目轴
                    data:userData.map(item => item.date),
                    axisLine: {
                        lineStyle: {
                        color: "#17b3a3",
                        },
                    },
                    axisLabel: {
                        interval: 0,
                        color: "#333",
                    },
                },
                yAxis: [
                    {
                        type: "value",
                        axisLine: {
                        lineStyle: {
                            color: "#17b3a3",
                        },
                        },
                    },
                ],
                color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
                    series: [
                        {
                            name:'新增用户',
                            data:userData.map(item => item.new),
                            type:'bar'
                        },
                        {
                            name:'活跃用户',
                            data:userData.map(item => item.active),
                            type:'bar'
                        }
                    ],
                }
            echarts2.setOption(echarts2Options)

            //饼状图
            const echarts3 = echarts.init(this.$refs.echarts3)
            const echarts3Options = {
                        tooltip: {
                            trigger: "item",
                        },
                        color: [
                            "#0f78f4",
                            "#dd536b",
                            "#9462e5",
                            "#a6a6a6",
                            "#e1bb22",
                            "#39c362",
                            "#3ed1cf",
                        ],
                        series: [
                            {
                                data:videoData,
                                type:'pie'
                            }
                        ],
            }
            echarts3.setOption(echarts3Options)
        })
        
    }
}
</script>
<style lang="less" scoped>
    .user{
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #999999;
        display: flex;
        align-items: center;
        img {
            margin-right: 40px;
            height: 150px;
            width: 150px;
            border-radius: 50%;
        }
        .userinfo {
            .name {
                font-size: 32px;
                margin-bottom: 10px;
                color: #FF2400;
                font-weight: 500;
            }
            .access {
                color: gray;
            }
             }
        
    }
    
    .login-info {
        p{
            font-size: 14px;
            line-height: 28px;
        }
        span {
            margin-left: 90px;
            color: skyblue;
        }
    }
    
.el-table .warning-row {
        background-color: plum;
}

.el-table .success-row {
        background-color: plum;
}
.schoolAddress {
    height: 458px;
}
.num {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .icon{
        width: 80px;
        height: 80px;
        font-size: 30px;
        text-align: center;
        line-height: 80px;
        color: #fff;
    }
    .detail {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .price{
            font-size: 30px;
            margin-bottom: 10px;
            line-height: 30px;
            height: 30px;
            margin-left: 15px;
        }
        .desc{
            margin-left: 15px;
            text-align: center;
            font-size: 14px;
            color: #999;
        }
    }
    .el-card{
        width: 32%;
        margin-bottom: 20px;
    }
}
.graph{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .el-card{
        width: 48%;
    }
}
</style>